<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>7. 代码调试 | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/48.b3432467.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link router-link-active">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端架构</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>前端深入理解</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端入门</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-basic/front-end/front-end-1.html" class="sidebar-link">1. 什么是前端</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-2.html" class="sidebar-link">2. 编写页面</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-3.html" class="sidebar-link">3. HTML 和 CSS</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-4.html" class="sidebar-link">4. DOM 和 BOM</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-5.html" class="sidebar-link">5. Javascript</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-6.html" class="sidebar-link">6. 认识浏览器</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html" aria-current="page" class="active sidebar-link">7. 代码调试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#代码中调试" class="sidebar-link">代码中调试</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#devtools" class="sidebar-link">DevTools</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#打断点" class="sidebar-link">打断点</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#debug-样式" class="sidebar-link">debug 样式</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#debug-js" class="sidebar-link">debug JS</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-basic/front-end/front-end-7.html#参考" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-8.html" class="sidebar-link">8. Ajax 和 http</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-9.html" class="sidebar-link">9. 网络协议基础</a></li><li><a href="/front-end-playground/front-end-basic/front-end/front-end-10.html" class="sidebar-link">10. 理解 HTTP 协议</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>前面讲了那么多基础性知识性的东西，本节我们来讲讲实战的一部分--代码调试。</p> <h1 id="debug-调试"><a href="#debug-调试" class="header-anchor">#</a> debug--调试</h1> <p>通常来说，我们写代码的时候主要通过两种方式进行调试：代码中调试、浏览器中调试。</p> <h2 id="代码中调试"><a href="#代码中调试" class="header-anchor">#</a> 代码中调试</h2> <p>在代码中调试，其实说白了也就常用的<code>alert()</code>、<code>console</code>、<code>debugger</code>等输出和断点。</p> <h3 id="alert"><a href="#alert" class="header-anchor">#</a> alert</h3> <p><code>alert()</code>会在窗口中显示一个警告对话框，上面显示有指定的文本内容以及一个“确定”按钮。</p> <p>使用<code>alert()</code>需要注意的是：</p> <ol><li><code>alert()</code>会阻塞进程。</li> <li><code>alert(param)</code>中<code>param</code>只能是<code>number</code>、<code>string</code>类型或者它们组成的数组。</li></ol> <p>如果我们运行以下代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&quot;123&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;123&quot;</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token number">123</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>会得到这样的结果：
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512982774%281%29.png" alt="image"></p> <h3 id="console"><a href="#console" class="header-anchor">#</a> console</h3> <p><code>console</code>的使用，大概是本骚年最常用的一个吧。</p> <p>很多人喜欢打断点来 debug，不过我用得最多的还是<code>console.log()</code>。当然这通常是自己调试自己的代码，如果说里面用到一些别人的库、调试其他人的问题的时候，或许打断点会更适合一些。</p> <p><code>console</code>常用的几个方法有：</p> <ul><li><code>console.log()</code>：打印字符串，以及对象、变量什么的都可以。</li> <li><code>console.info()</code>：打印以感叹号字符开始的信息，使用方法和<code>log</code>相同。</li> <li><code>console.error()</code>：打印一条错误信息。</li> <li><code>console.dir()</code>：打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。
<blockquote><p><code>console.dir()</code>常用于打印<code>DOM</code>元素的属性</p></blockquote></li></ul> <p>其他的可以参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Console" target="_blank" rel="noopener noreferrer">Console | MDN<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p><code>console</code>适用于大致已定位到哪里出了问题，然后在某些关键点输出。这是个人的感觉，其实更多只是习惯问题吧。</p> <p>自从浏览器支持 ES6 之后，本人就很喜欢这样输出了：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 这样可以顺便把变量名也打印出来</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token punctuation">,</span> list<span class="token punctuation">,</span> state <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="debugger"><a href="#debugger" class="header-anchor">#</a> debugger</h3> <p><code>debugger</code>语句调用任何可用的调试功能，例如设置断点。 如果没有调试功能可用，则此语句不起作用。<br>
当<code>debugger</code>被调用时, 执行暂停在<code>debugger</code>语句的位置。就像在脚本源代码中的断点一样。</p> <p>我基本很少用到<code>debugger</code>，不过据说在<code>node.js</code>中，因为木有浏览器自带的断点，使用<code>debugger</code>来调试也是很方便的（可惜自己做来做去，还是主打 PC 端应用就是了）。</p> <p>还有，使用完之后，发布前记得注释或者删除掉噢。</p> <h1 id="浏览器-chrome-调试"><a href="#浏览器-chrome-调试" class="header-anchor">#</a> 浏览器(Chrome)调试</h1> <p>浏览器中调试功能又多又方便（主要是在 Chrome 下），大家可以参考下一些文章。前面章节有简单介绍过，这里讲一下用得比较多的，后面也会给到一些参考文章。</p> <h2 id="devtools"><a href="#devtools" class="header-anchor">#</a> DevTools</h2> <p>我们先看看 Chrome 提供的开发者工具：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512990373%281%29.png" alt="image"></p> <p>跟上次一样，我们从左往右讲起：</p> <ol><li>箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息。</li> <li>设备图标：点击它可以切换到不同的终端（移动端和 PC 端）进行开发模式。可以选择不同的移动终端设备，同时可以选择不同的尺寸比例。常用的移动端页面调试，还能通过配置<code>User agent</code>来模拟终端环境。</li> <li><code>Elements</code>：用来查看、修改页面上的元素，包括<code>DOM</code>标签，以及<code>css</code>样式的查看，修改，还有相关盒模型的图形信息。</li> <li><code>Console</code>：用于打印和输出相关的命令信息，源代码定位等等。</li> <li><code>Sources</code>：<code>Sources</code>下的<code>Sources</code>查看浏览器页面中的源文件（<code>html/js/img/css</code>等），点击下面的<code>{}</code>大括号可以将代码转成可读格式，同时可给<code>js</code>文件添加上断点。<code>Sources</code>下的<code>Snippets</code>可以添加文件片段，可在浏览器中运行。</li> <li><code>Network</code>：可以看到所有的资源请求，包括网络请求、静态资源（<code>html</code>、<code>css</code>、<code>js</code>、图片等）文件请求，常用于调试网络请求。</li></ol> <p>剩下的功能或许用得不是特别多，可以了解下（本人了解不多，或许不一定准确）：</p> <ol start="7"><li><code>Performance</code>：查看页面在浏览器运行时的性能表现，如 CPU\GPU 执行时间与内存占用等。</li> <li><code>Memory</code>：似乎是内存泄漏分析相关的功能？</li> <li><code>Application</code>：会列出所有的资源，以及 HTML5 的 Database 和 LocalStore 等，你可以对存储的内容编辑和删除。</li> <li><code>Security</code>：查看网站的安全性，有效证书等。</li> <li><code>Audits</code>：会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另一类是界面性能。</li></ol> <h2 id="打断点"><a href="#打断点" class="header-anchor">#</a> 打断点</h2> <h3 id="_1-代码断点"><a href="#_1-代码断点" class="header-anchor">#</a> 1. 代码断点</h3> <p>常用的浏览器代码断点，在<code>Sources</code>面板<code>js</code>文件行号处设置断点，如图我们下了个断点：<br> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512993498%281%29.jpg" alt="image"></p> <p>这里我们在请求发起的位置打了个断点，每次我们在搜索输入框输入的时候，都会发送请求，触发 debug 模式。</p> <p>这里除了常规断点外, 还有个条件断点(右键 -&gt; conditional breakpoint), 在设置的条件为<code>true</code>时才会断电, 在循环中需要断点时比较有用。断点后可以查看堆栈、变量。</p> <h3 id="_2-事件断点"><a href="#_2-事件断点" class="header-anchor">#</a> 2. 事件断点</h3> <p>元素上事件断点：某一事件/某类事件，从<code>Elements &gt; Event Listeners</code>中进行。</p> <h3 id="_3-dom-断点"><a href="#_3-dom-断点" class="header-anchor">#</a> 3. DOM 断点</h3> <p>一般是<code>DOM</code>结构改变时触发。有时候我们需要监听某个<code>DOM</code>被修改情况，而不关心是哪行代码做的修改（也可能有多处都会对其做修改），可以直接在<code>DOM</code>上设置断点。</p> <p>在元素审查的<code>Elements</code>标签页中在某个元素上右键菜单里可以设置三种不同情况的断点：</p> <ul><li>子节点修改</li> <li>自身属性修改</li> <li>自身节点被删除</li></ul> <h3 id="_4-xhr-断点"><a href="#_4-xhr-断点" class="header-anchor">#</a> 4. XHR 断点</h3> <p>右侧调试区有一个<code>XHR Breakpoints</code>，点击<code>+</code> 并输入<code>URL</code>包含的字符串，即可监听该<code>URL</code>的<code>Ajax</code>请求，输入内容就相当于<code>URL</code>的过滤器。<br>
一旦<code>XHR</code>调用触发时就会在<code>request.send()</code>的地方中断。</p> <h3 id="_5-全局事件断点"><a href="#_5-全局事件断点" class="header-anchor">#</a> 5. 全局事件断点</h3> <p>对事件发生时断点，不会限定在元素上，只要是事件发生，并且有<code>handler</code>就断点。<br>
还可以对<code>resize</code>、<code>ajax</code>、<code>setTimeout/setInterval</code>断点。</p> <p>上面这些断点本骚年都用得不是很多，所以也不能提供很好的说明。<br>
更多详细内容，可以参考<a href="http://www.cnblogs.com/jingwhale/p/4508774.html" target="_blank" rel="noopener noreferrer">《页面制作之调试工具》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，里面通过动图讲述了一些断点是如何添加的。</p> <h1 id="关于-debug-的一点心得"><a href="#关于-debug-的一点心得" class="header-anchor">#</a> 关于 debug 的一点心得</h1> <h2 id="debug-样式"><a href="#debug-样式" class="header-anchor">#</a> debug 样式</h2> <p>样式的调试需要有个前提，就是对一些样式属性有很好的认识和理解，尤其涉及盒子模型、<code>display</code>和定位等。<br>
样式的规则除了一些基本的逻辑能遵循（可参考前面文章<a href="/front-end-playground/front-end-basic/front-end/front-end-3.html">《3.HTML 和 CSS》</a>），更多的则是丰富的经验，多写、多练。</p> <p>在此之外，一般样式的 debug 逻辑大概会是这样：</p> <ol><li>样式是否生效。</li> <li>文件、相关样式代码是否加载。</li> <li>是否被其他样式覆盖（优先级问题）。</li></ol> <p>常见的有上面的问题，除此之外，大部分都是没使用合理的<code>style</code>了吧。</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512998012%281%29.png" alt="image"><br>
如上图，一般我们会在选中对应的元素后，从上往下来找到生效（或不生效）的样式，同时也可以定位到对应的源文件。</p> <p>这里面如果是本地环境调试的话，在<code>source map</code>的支持下，我们甚至可以直接在浏览器中修改源文件，保存生效。具体配置和操作可以参考<a href="https://developers.google.cn/web/tools/chrome-devtools/javascript/source-maps?hl=zh-cn" target="_blank" rel="noopener noreferrer">将预处理代码映射到源代码<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="debug-js"><a href="#debug-js" class="header-anchor">#</a> debug JS</h2> <p>JS 的调试，像上面说过的，一般分为输出和打断点两种。</p> <p>一般 JS 的 debug 逻辑，未按预期执行会有这样的原因：代码未执行到理想的位置。</p> <p>这时候我们要思考这样的问题：</p> <ol><li>为事件触发执行 -&gt; 检测事件是否被触发。</li> <li>在函数中执行 -&gt; 检测函数是否被调用。</li> <li>在判断语句中执行 -&gt; 检测判断是否正确。</li></ol> <p>我们可以在这些地方进行输出，或者打下断点：</p> <ol><li>事件触发的地方。</li> <li>函数调用过程。</li> <li>判断语句（<code>if</code>等）。</li></ol> <p>以上是类似的推导逻辑，我们在写代码时，会有一个预期的执行顺序和期望，如果说不生效，则我们可以：</p> <ul><li>从前往后执行步骤，看在哪一步分了岔路</li> <li>从后往前打下断点，看在哪一步走丢了</li></ul> <p>其实最重要的是思路需要清晰，如果说你连自己要做的功能，逻辑还没理清楚的话，编写的代码质量不会高，同时调试性能也会随着下降。</p> <h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <ul><li><a href="http://www.jianshu.com/p/b25c5b88baf5" target="_blank" rel="noopener noreferrer">《前端 chrome 浏览器调试总结》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.chrome.com/devtools" target="_blank" rel="noopener noreferrer">Chrome DevTools Overview<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://www.cnblogs.com/jingwhale/p/4508774.html" target="_blank" rel="noopener noreferrer">《页面制作之调试工具》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h1 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h1> <p>这一节我们主要基于 Chrome 浏览器，大致讲了一些开发者工具的功能。调试是很重要的一步，每一次 debug 我们都要吸取经验，总结教训。不管是 CSS 还是 JS 的调试，经验的积累都是很需要的，同时也能提高我们写代码的质量。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-basic/front-end/front-end-7.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-basic/front-end/front-end-6.html" class="prev">
          6. 认识浏览器
        </a></span> <span class="next"><a href="/front-end-playground/front-end-basic/front-end/front-end-8.html">
          8. Ajax 和 http
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-3429" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/48.b3432467.js" defer></script>
  </body>
</html>
